import React, { createElement } from 'react';
import classNames from 'classnames';
import { Button } from 'antd';
import styles from './index.less';

const config = {
    403: {
        img: '/img/exception/403.svg',
        title: '403',
        desc: '抱歉，你无权访问该页面',
    },
    404: {
        img: '/img/exception/404.svg',
        title: '404',
        desc: '抱歉，你访问的页面不存在',
    },
    500: {
        img: '/img/exception/500.svg',
        title: '500',
        desc: '抱歉，服务器出错了',
    },
};

const Exception = ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
    const pageType = type in config ? type : 404;
    const clsString = classNames(styles.exception, className);

    return (
        <div className={clsString} {...rest}>
            <div className={styles.imgBlock}>
                <div
                    className={styles.imgEle}
                    style={{ backgroundImage: `url(${img || config[pageType].img})` }}
                />
            </div>
            <div className={styles.content}>
                <h1>{title || config[pageType].title}</h1>
                <div className={styles.desc}>{desc || config[pageType].desc}</div>
                <div className={styles.actions}>
                    {actions ||
                        createElement(
                            linkElement,
                            {
                                to: rest.to || '/',
                                href: rest.to || '/'
                            },
                            <div className='btn btn-primary d-block d-md-inline-block'>
                                {'<< '}返回首页
                            </div>
                        )}
                </div>
            </div>
        </div>
    );
};

export default Exception;
